<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <el-row>
          <img src="http://yangxiong001.oss-cn-hangzhou.aliyuncs.com/photo/logo.png"
               alt="暂无"/>
        </el-row>
        <el-menu default-active="5" :default-openeds="openeds" style="height:700px;">
          <el-menu-item index="5" @click="checkoutFirst()" style="text-align: left;">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统主页</span>
          </el-menu-item>
          <el-submenu index="1" style="text-align: left;">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>图书管理</span>
            </template>
            <el-menu-item index="1-1" @click="bookList()"><i class="el-icon-folder"></i>图书列表</el-menu-item>
            <el-menu-item index="1-2" @click="checkoutUserAdvice()"><i class="el-icon-thumb"></i>网友推荐</el-menu-item>
          </el-submenu>
          <el-menu-item index="2" @click="checkoutUser()" style="text-align: left;">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="3" @click="checkoutDict()" style="text-align: left;">
            <i class="el-icon-collection"></i>
            <span slot="title">字典管理</span>
          </el-menu-item>
          <el-menu-item index="7" style="text-align: left;" @click="checkoutMessage()">
            <i class="el-icon-notebook-1" style="text-align: left;"></i>
            <span slot="title">系统通知</span>
          </el-menu-item>
          <el-menu-item index="6" @click="checkoutFileType()" style="text-align: left;">
            <i class="el-icon-collection"></i>
            <span slot="title">图片类型</span>
          </el-menu-item>
          <el-menu-item index="4" style="text-align: left;" @click="checkoutManager()">
            <i class="el-icon-folder" style="text-align: left;"></i>
            <span slot="title">系统管理员</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div style="border-bottom: #d9d9d9 solid 1px; height: 70px">
            <el-row :gutter="24">
              <div>
                <el-col :span="19">
                  <div>
                    <div class="hea">在线阅览室后台管理系统</div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="dropdown">
                    <div style="margin-top: 15px">
                      <el-row :gutter="24">
                        <el-col :span="8">
                          <div>
                            <el-avatar :src="currentUser.avatar" :size="45"></el-avatar>
                          </div>
                        </el-col>
                        <el-col :span="16">
                          <div style="margin-top: 15px; margin-left: 10px; color: palevioletred">
                            {{ currentUser.userName }}
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="dropdown-content">
                      <span @click="toSelf">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span>
                      <span @click="doLogout">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                    </div>
                  </div>
                </el-col>
              </div>
            </el-row>
          </div>
        </el-header>
        <el-main style="height: 650px">
            <router-view/>
        </el-main>
        <el-footer id="footer">
          <div style="margin-top: 23px; font-weight: bold">Copyright@2022.12.10 YangXiong.AllRights Reserved.</div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      openeds: ['1'],
      currentUser: {}
    }
  },
  created() {
    this.currentUser = JSON.parse(localStorage.getItem("loginMes"));
  },
  methods: {
    toSelf() {
      this.$router.push({path: "/self", query: this.currentUser});
    },
    doLogout() {
      this.$axios.get("/api/logout").then(res => {
        this.$router.push('/login');
        localStorage.removeItem("loginMes");
        this.login = false;
        if (res.data.code === '200') {
          this.$message.success(res.data.data);
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    checkoutDict() {
      this.$router.push('dict');
    },
    checkoutFileType() {
      this.$router.push('fileType');
    },
    checkoutMessage() {
      this.$router.push('message');
    },
    checkoutUser() {
      this.$router.push('user');
    },
    bookList() {
      this.$router.push('book');
    },
    checkoutFirst() {
      this.$router.push('index');
    },
    checkoutManager() {
      this.$router.push('manager');
    },
    checkoutUserAdvice() {
      this.$router.push('userAdvice');
    },
  }
}
</script>

<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;

}

html,
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

#footer {
  bottom: 0;
  font-size: 14px;
  text-align: center;
  background-color: #f5f5f5;
}

.hea {
  text-align: left;
  padding-top: 10px;
  font-size: 32px;
  color: cornflowerblue;
  font-weight: 666
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.dropdown-content span {
  color: palevioletred;
  padding: 10px 10px;
  text-decoration: none;
  display: block;
}

.dropdown-content span:hover {
  background-color: #f1f1f1;
  text-align: center;
  color: #444;
}

.dropdown:hover .dropdown-content {
  display: block;
  text-align: center;
  z-index: 99999;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.dropdown {
  position: relative;;
  display: inline-block;
  float: left;
}
img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

</style>
